<template>
  <el-dialog
    v-model="dialogFormVisible"
    :title="title"
    width="500px"
    @close="close"
  >
    <el-form ref="formRef" label-width="80px" :model="form" :rules="rules">
      <el-form-item label="账号" prop="id">
        <el-select v-model="form.id" clearable @change="handleAccount">
          <el-option
            v-for="item in accountOperateList"
            :key="item.id"
            :label="item.platformAccount"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        v-if="platformId === 1"
        label="新增访问数"
        prop="newVisitsNumber"
      >
        <el-input
          v-model.trim="form.newVisitsNumber"
          placeholder="请输入新增访问数"
        />
      </el-form-item>
      <el-form-item v-if="platformId === 1" label="观看时长" prop="watchTime">
        <el-input v-model.trim="form.watchTime" placeholder="请输入观看时长" />
      </el-form-item>
      <el-form-item v-if="platformId === 1" label="新增点赞" prop="newPraise">
        <el-input v-model.trim="form.newPraise" placeholder="请输入新增点赞" />
      </el-form-item>
      <el-form-item v-if="platformId === 1" label="新增评论" prop="newReview">
        <el-input v-model.trim="form.newReview" placeholder="请输入新增评论" />
      </el-form-item>
      <el-form-item v-if="platformId === 1" label="新增收藏" prop="newCollect">
        <el-input v-model.trim="form.newCollect" placeholder="请输入新增收藏" />
      </el-form-item>
      <el-form-item v-if="platformId === 1" label="新增笔记分享" prop="newNote">
        <el-input
          v-model.trim="form.newNote"
          placeholder="请输入新增笔记分享"
        />
      </el-form-item>
      <el-form-item v-if="platformId === 1" label="成交率" prop="turnoverRate">
        <el-input v-model.trim="form.turnoverRate" placeholder="请输入成交率" />
      </el-form-item>
      <el-form-item v-if="platformId === 1" label="笔记涨粉" prop="chalkUp">
        <el-input v-model.trim="form.chalkUp" placeholder="请输入笔记涨粉" />
      </el-form-item>
      <el-form-item
        v-if="platformId === 1"
        label="薯条消耗"
        prop="frenchFryConsumption"
      >
        <el-input
          v-model.trim="form.frenchFryConsumption"
          placeholder="请输入薯条消耗"
        />
      </el-form-item>
      <el-form-item
        v-if="platformId === 1"
        label="主页访问"
        prop="homeVisitNum"
      >
        <el-input
          v-model.trim="form.homeVisitNum"
          placeholder="请输入主页访问"
        />
      </el-form-item>
      <el-form-item
        v-if="platformId === 1"
        label="私信量"
        prop="communicationNum"
      >
        <el-input
          v-model.trim="form.communicationNum"
          placeholder="请输入私信量"
        />
      </el-form-item>
      <el-form-item
        v-if="platformId !== 3"
        label="有效客资"
        prop="canGuestCapital"
      >
        <el-input
          v-model.trim="form.canGuestCapital"
          placeholder="请输入有效客资"
        />
      </el-form-item>
      <el-form-item label="新客成单数" prop="newSuccessfulNum">
        <el-input
          v-model.trim="form.newSuccessfullNum"
          placeholder="请输入新客成单数"
        />
      </el-form-item>
      <el-form-item label="新客成交额" prop="newSuccessfulPrice">
        <el-input
          v-model.trim="form.newSuccessfulPrice"
          placeholder="请输入新客成交额"
        />
      </el-form-item>
      <el-form-item label="老客成单数" prop="oldSuccessfulNum">
        <el-input
          v-model.trim="form.oldSuccessfulNum"
          placeholder="请输入老客成单数"
        />
      </el-form-item>
      <el-form-item label="老客成交额" prop="oldSuccessfulPrice">
        <el-input
          v-model.trim="form.oldSuccessfulPrice"
          placeholder="请输入老客成交额"
        />
      </el-form-item>
      <el-form-item label="投放花费" prop="putSpend">
        <el-input v-model.trim="form.putSpend" placeholder="请输入投放花费" />
      </el-form-item>
      <el-form-item
        v-if="platformId === 2 || platformId === 3"
        label="曝光量"
        prop="exposure"
      >
        <el-input v-model.trim="form.exposure" placeholder="请输入曝光量" />
      </el-form-item>
      <el-form-item
        v-if="platformId === 2 || platformId === 3"
        label="点击数"
        prop="tapNumber"
      >
        <el-input v-model.trim="form.tapNumber" placeholder="请输入点击数" />
      </el-form-item>
      <el-form-item
        v-if="platformId === 2 || platformId === 3"
        label="在线咨询量"
        prop="onlineConsult"
      >
        <el-input
          v-model.trim="form.onlineConsult"
          placeholder="请输入在线咨询量"
        />
      </el-form-item>
      <el-form-item
        v-if="platformId === 2 || platformId === 3"
        label="电话量"
        prop="phoneNum"
      >
        <el-input v-model.trim="form.phoneNum" placeholder="请输入电话量" />
      </el-form-item>
      <el-form-item
        v-if="platformId === 2 || platformId === 3"
        label="加v数量"
        prop="addWechatNum"
      >
        <el-input
          v-model.trim="form.addWechatNum"
          placeholder="请输入加v数量"
        />
      </el-form-item>
      <el-form-item
        v-if="platformId === 2 || platformId === 3"
        label="无效客资"
        prop="unableAssets"
      >
        <el-input
          v-model.trim="form.unableAssets"
          placeholder="请输入无效客资"
        />
      </el-form-item>
      <el-form-item
        v-if="platformId === 2 || platformId === 3"
        label="精选评价"
        prop="selectiveEvaluation"
      >
        <el-input
          v-model.trim="form.selectiveEvaluation"
          placeholder="请输入精选评价"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="save">确 定</el-button>
    </template>
  </el-dialog>
</template>

<script>
  // import { doAdd, doEdit } from '@/api/userManagement'
  import { flexibleTopicRecord, editTopicRecord } from '@/api/topics'
  import { fetchaccountOperate } from '@/api/accountManagement'

  export default defineComponent({
    name: 'UserManagementEdit',
    props: {
      roles: {
        type: Array,
        default: () => {
          return []
        },
      },
      accountOperateList: {
        type: Array,
        default: () => {
          return []
        },
      },
    },
    emits: ['fetch-data'],
    setup(props, { emit }) {
      const $baseMessage = inject('$baseMessage')

      const state = reactive({
        formRef: null,
        form: {
          roleIds: [],
        },
        rules: {
          id: [{ required: true, trigger: 'blur', message: '请选择平台账号' }],
          username: [
            { required: true, trigger: 'blur', message: '请输入用户名' },
          ],
          mobile: [
            { required: true, trigger: 'blur', message: '请输入手机号' },
          ],
          email: [{ required: true, trigger: 'blur', message: '请输入邮箱' }],
          roleIds: [{ required: true, trigger: 'blur', message: '请选择角色' }],
          nickname: [
            { required: true, trigger: 'blur', message: '请输入昵称' },
          ],
          gender: [{ required: true, trigger: 'blur', message: '请选择性别' }],
          status: [
            { required: true, trigger: 'change', message: '请选择状态' },
          ],
        },
        title: '',
        dialogFormVisible: false,
        accountOperateList: [],
        platformId: null,
      })
      const fetchAccountOperate = async () => {
        try {
          state.listLoading = true
          // state.queryForm.platformId = state.platformId
          // state.queryForm.accountId = state.accountId
          const { data } = await fetchaccountOperate()
          console.log(data, 'dssfasdasdas')
          state.accountOperateList = data
          state.listLoading = false
        } catch (e) {
          console.log(e)
        }
      }
      const handleAccount = (value) => {
        // console.log(typeof(value));
        const list = state.accountOperateList.find((item) => {
          return item.id === value
        })
        // console.log(list,list.ownPlatform,3424);
        state.platformId = list.ownPlatform
        // console.log(list,typeof(list.ownPlatform)+'dsdsds')
      }
      const showEdit = (row) => {
        if (!row) {
          state.title = '添加'
        } else {
          state.title = '编辑'
          state.form = JSON.parse(JSON.stringify(row))
          state.platformId = `${row.platformId}`
          state.form.ownPlatform = `${row.platformId}`
          // state.form.accountId = accountId
          // console.log(1223,platformId,accountId,state.form);
        }
        state.dialogFormVisible = true
      }
      const close = () => {
        state['formRef'].resetFields()
        state.form = {
          roles: [],
        }
        state.dialogFormVisible = false
      }
      const save = () => {
        state['formRef'].validate(async (valid) => {
          if (valid) {
            if (state.form.ownPlatform) {
              state.form.platformId = state.form.ownPlatform
            }
            if (state.title === '添加') {
              state.form.accountId = state.form.id
              state.form.platformId = state.platformId
              delete state.form.id
            }
            try {
              const { msg } =
                state.title === '添加'
                  ? await flexibleTopicRecord(state.form)
                  : await editTopicRecord(state.form)
              $baseMessage(msg, 'success', 'vab-hey-message-success')
              emit('fetch-data')
              close()
            } catch (err) {
              console.error(err)
            }
          }
        })
      }
      fetchAccountOperate()
      return {
        ...toRefs(state),
        showEdit,
        close,
        save,
        handleAccount,
      }
    },
  })
</script>
